<!--
 * @Author: TJN tjn@246@126.com
 * @Date: 2024-04-23 11:03:24
 * @LastEditors: TJN tjn@246@126.com
 * @LastEditTime: 2024-04-27 09:17:28
 * @FilePath: \uni-wallpaperd:\新建文件夹\cute-pet-case-uni-app\cute-pet-case-uni-app\uni-wallpaper\components\custom-nav-bar\custom-nav-bar.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by ${git_name_email}, All Rights Reserved. 
-->
<template>
	<view class="layout">
		<view class="nav-bar">
			<view class="status-bar" :style="{height:getStatusBarHeight()+'px'}">
				
			</view>
			
			<view class="title-bar" :style="{height:getTitleBarHeight()+'px'}">
				<view class="title">
					{{title}}
				</view>
				<view class="search">
					<uni-icons class="icon" type="search" color="#888" size="18">
						<text class="text">搜索</text>
					</uni-icons>
				</view>
			</view>
		</view>
		
		<view class="fill" :style="{height:getStatusBarHeight()+getTitleBarHeight()+'px'}">
			
		</view>
	</view>
</template>

<script setup>
import { getStatusBarHeight ,getTitleBarHeight } from '@/utils/system.js'
defineProps({
	title:{
		type:String,
		default:'壁纸'
	}
})



</script>

<style lang="scss" scoped>
	.layout{
		.nav-bar{
			position: fixed;
			top: 0;
			left: 0;
			z-index: 10;
			width: 100%;
			background: 
			linear-gradient(to bottom , transparent,#fff 400rpx),
			linear-gradient(to right , #beecd8 20%,#f4e2d8);
			
			.status-bar{
			}
			
			
			.title-bar{
				display: flex;
				align-items: center;
				padding: 0 30rpx;
				.title{
					font-size: 22px;
					font-weight: 700;
					color: #000;
				}
				
				.search{
					display: flex;
					align-items: center;
					width: 220rpx;
					height: 56rpx;
					border-radius: 60rpx;
					background: rgba(255, 255, 255, .4);
					margin-left: 30rpx;
					color: #999;
					font-size: 28rpx;
					
					.icon{
					 margin-left: 5rpx;
					}
					
					.text{
						padding-left: 10rpx;
					}
					
				}
				
			}
		}
		
		
		.fill{}
	}
</style>